<template>
    <el-form :model="newBanner" label-width="auto" style="max-width: 600px">
      <el-form-item label="图片地址">
        <el-input v-model="newBanner.img" />
      </el-form-item>
      <el-form-item label="图片连接">
        <el-input v-model="newBanner.link" />
      </el-form-item>
      <el-form-item label="图片提示">
        <el-input v-model="newBanner.alt" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addBanner">添加</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive } from "vue";
  import type { IBanner } from "@/myTypes";
  import { addBannerApi } from "@/api/banners";
  import { ElMessage } from "element-plus";
  
  const newBanner = reactive<IBanner>({
    img: "",
    link: "",
    alt: "",
  });
  
  const addBanner = async () => {
    // console.log('submit!',form)
    const res = await addBannerApi(newBanner);
  
    if (res.data.code === "200") {
      ElMessage.success("添加成功！");
    }
    
    clearBanner();
  };
  
  function clearBanner() {
    // interface ITypeIndex {
    //   img: "img";
    //   link: "link";
    //   alt: "alt";
    // }
  
    // for(let key in newBanner) {
    //   newBanner[key] = "";
    // }
  
    newBanner.img=""
    newBanner.link=""
    newBanner.alt=""
  
  }
  </script>
  